<template>
<div>
      <div class="help-section" v-if="list">
      <div class="p-list" v-for="(item, index) in list" :key="index" >
        <image :src="item.cover + '?imageMogr2/auto-orient/thumbnail/640x/quality/75'" mode="widthFix" @click="onDetail(item)"/>
        <div class="detail" @click="onDetail(item)">
          <div class="title"> {{item.title}} </div>
          <rich-text :nodes="item.info.text"></rich-text>
        </div>
      </div>
    </div>
</div>
</template>
<script>
import * as HelperAction from '@/api/helper'
import Utils from '@/utils'

export default {
  data () {
    return {
      page: 1,
      finished: false,
      list: []
    }
  },
  onPullDownRefresh () {
    this.page = 1
    this.finished = false
    this.fetchList()
    wx.stopPullDownRefresh()
  },
  onLoad (query) {
    this.page = 1
    this.finished = false
    this.list = []
    wx.showNavigationBarLoading()
    this.fetchList()
    // scene存在,则优先判断
    if (query.scene) {
      let params = Utils.parseQuery(decodeURIComponent(query.scene))
      if (params.ic && params.ic.length === 6) wx.setStorageSync('__inviteCode', params.ic)
      return
    }
    if (query.code) wx.setStorageSync('__inviteCode', query.name)
  },
  methods: {
    onDetail (item) {
      wx.navigateTo({ url: './detail?id=' + item.id })
    },
    fetchList () {
      if (this.finished) {
        wx.hideNavigationBarLoading()
        return false
      }
      HelperAction.list({page: this.page})
        .then(data => {
          if (data.data.length > 0) {
            data.data.map(val => {
              val.created_at = Utils.getDateDiffCountdown(val.created_at)
              val.info = val.content.find(el => { if (el.text) return el })
              return val
            })
            this.list = this.list.concat(data.data)
          } else {
            this.finished = true
          }
          wx.hideNavigationBarLoading()
        })
        .catch(err => {
          console.log(err)
          wx.hideNavigationBarLoading()
        })
    }
  }
}
</script>

<style lang="less" scoped>
  .help-section {
    position: relative;
    top: -8px;
  background: #F8F8F8;
    .p-list {
      margin:20rpx 30rpx;
      padding:30rpx;
      background:#fff;
      image {
        width: 100%;
      }
      .detail {
        color: #575757;
        font-size: 26rpx;
        .title {
        color: #000000;
        font-weight: 500;
          display: flex;
          justify-content: space-between;
          font-size: 30rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
</style>

